<script setup lang="ts">
import {computed, reactive} from 'vue';
import {useForm} from '@/hooks/index';
import {AForm} from '@/components/index';
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false,
  },
);
const emit = defineEmits<{
  'update:visible': [value: boolean];
}>();

const visible = computed({
  get: () => props.visible,
  set: (value) => {
    emit('update:visible', value);
  },
});

const formData: any = reactive({
  name: undefined,
  aiHao: undefined,
  date: undefined,
  num: undefined,
  onOff: false,
  sex: undefined,
});
const rules = reactive({
  name: [
    {required: true, message: '必填项'},
    {min: 2, max: 5, message: '长度3-5个字符'},
  ],
  aiHao: [{required: true, message: '必填项'}],
  date: [{required: true, message: '必填项'}],
  num: [{required: true, message: '必填项'}],
  sex: [{required: true, message: '必填项'}],
});
const formItem = [
  {id: '1', label: '姓名', itemKey: 'name', itemType: 'input'},
  {id: '2', label: '爱好', itemKey: 'aiHao', itemType: 'select', options: [{label: '打球', value: '1'}]},
  {id: '3', label: '选择时间', itemKey: 'date', itemType: 'date-range-picker'},
  {id: '4', label: '数字', itemKey: 'num', itemType: 'input-number', min: 0, max: 5},
  {id: '5', label: '开关', itemKey: 'onOff', itemType: 'switch'},
  {
    id: '6',
    label: '性别',
    itemKey: 'sex',
    itemType: 'radio',
    options: [
      {id: '1', label: '男', value: '2'},
      {id: '2', label: '女', value: '1'},
    ],
  },
];
const {validateInfos, handleSubmit, handleReset} = useForm({formData, rules});

const handleOk = () => {
  emit('update:visible', false);
};
</script>

<template>
  <a-modal v-model:open="visible" title="表单弹框" width="500px" @ok="handleOk">
    <AForm
      :formData="formData"
      :formItem="formItem"
      :validateInfos="validateInfos"
      formItemCol="vertical"
      @submit="handleSubmit"
      @reset="handleReset"
      :query="false"
      labelColLayout="horizontal"
    />
  </a-modal>
</template>

<style lang="less" scoped></style>
